<template>
	<view class="page-wrapper">
		<div class="content">
			<ul>
				<li>
					<span>手机号：</span>
					<input type="text" value="15235****98" disabled="" />
					<button @click="sendCode">发送验证码</button>
				</li>
				<li>
					<span>验证码：</span>
					<input type="text" placeholder="请输入正确的验证码" />
				</li>
			</ul>
		</div>
		<button @click="submit">验证</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			sendCode() {
				uni.showToast({
					title: '验证码发送成功！',
					icon: 'none',
					duration: 1500
				})
			},
			submit() {
				uni.navigateTo({
					url: '../changePhoneNew/changePhoneNew'
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx;
	}
	.content>ul {
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.content>ul>li {
		box-sizing: border-box;
		padding: 20rpx 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 140rpx;
		border-bottom: 1px solid #eeeeee;
	}
	.content>ul>li:last-child {
		border: none
	}
	
	.content>ul>li>span {
		flex-shrink: 0;
	}
	.content>ul>li>input {
		flex-grow: 1;
	}
	.content>ul>li>button {
		flex-shrink: 0;
		color: #c6c6c6;
		font-size: 26rpx;
		border: 1rpx solid #0482f9;
		height: 66rpx;
		width: 189rpx;
		background-color: #ffffff;
		border-radius: 34.5rpx;
	}
	.page-wrapper>button {
		background-image: linear-gradient(to right, #0973F7, #0286FA);
		width: 602rpx;
		height: 90rpx;
		border-radius: 45rpx;
		border:none;
		color: #ffffff;
		font-size: 34rpx;
		margin-top: 30rpx
	}
</style>
